<template>
	<view class="task-wrap">
		<view class="scroll-wrap" style="position: relative;">
			<view class="tabContainer" style="margin-bottom: 120px;">
				<!-- 样品列表 -->
				<view class="sample-term-wrap">
					<view class="sample-term" style="border-radius: 16px;padding: 0;">
						<view class="center_between">
							<view class="content center_between">
								<!-- <view class="content" style="margin-right: 10px;text-align: left;">
									的发表分析
								</view> -->
								<u-search :show-action="true" action-text="搜索" :animation="true" placeholder="请输入同系因子套餐名称" style='width: 100%;' v-model="keyword"   :focus="true" @search="query"  @custom='query'/>
							</view>
						</view>
					</view>
					<view class="u-page__item">
						<u-collapse accordion ref="collapse">
							<u-collapse-item v-for="(item,index) in dataList" :key="index">
								<view slot="title" class="u-page__item__title__slot-title" style="width: 100%;">
									<view class="FactorNav" style="margin: 0;">
										<view class="top_head" style="font-size: 14px;">
											<view class="top_head_nav">
												<text style="width: 80px;">套餐名称</text>
												<view class="content font_left" style="width: 180px;color:#193566">{{item.groupName}}</view>
											</view>
											<view class="top_head_nav" style="margin-top: 8px;">
												<text style="width: 80px;">检测因子</text>
												<view class="content font_left" style="width: 180px;color:#193566">
													{{item.groupDesc}}</view>
											</view>
										</view>
										<view class="openFactorNav"  @click="searchFactor(item,index)" v-cloak>
											查看检测因子 <u-icon name="arrow-down-fill" style="margin-left: 10px;"/>
										</view>
										
									</view>
								</view>
									
								
								<view class="u-collapse-content"  >
									
									<view class="sample-term" v-for="(item2,index2) in item.subCheckStandardIds" :key="index2"  style="position: relative; margin-top: 0;box-shadow:0 0 0;margin-bottom: 8px;">
										
										
										<view class="center_between">
											<b style="width: 80px;">检测因子</b>
											<view class="content center_between">
												<b class="content" style="margin-right: 10px;text-align: left;color: #193566;">
													{{item2.factorName}}
												</b>
											</view>
										</view>
										<view class="center_between" style="margin: 8px 0;">
											<view style="width: 80px;font-size: 12px;">标准号</view>
											<view class="content center_between">
												<view class="content" style="margin-right: 10px;text-align: left;">
													{{item2.standardNo}}
												</view>
											</view>
										</view>
										<view class="center_between" style="margin:0 0 8px 0;">
											<view style="width: 80px;font-size: 12px;">检测标准</view>
											<view class="content center_between">
												<view class="content" style="margin-right: 10px;text-align: left;">
													{{item2.standardName}}
												</view>
											</view>
										</view>
										<view class="center_between">
											<view style="width: 80px;font-size: 12px;">分析方法</view>
											<view class="content center_between">
												<view class="content" style="margin-right: 10px;text-align: left;">
													{{item2.analysisMethod || ''}}
												</view>
											</view>
										</view>
									
										<view class="nav_btn">
											<u-checkbox activeColor="#2a3688" @change="checkboxChange($event,item,item2)" v-model="item2.checked"
												shape="square"></u-checkbox>
										</view>
									</view>	
								
								
								</view>
							</u-collapse-item>
						</u-collapse>
						
					
					</view>
				</view>
			</view>

			<view class="footerBtn" style="display: flex;">
				<view class="btn footerBtn footerBtns" style="justify-content: center;">
					<!-- <view class="" style="position: relative;flex: 1;">
						<view style="padding:0 10px;">
							<u-button class="leftTabsBtn" type="warning" @click="openDialogBtns">保存</u-button>
						</view>
					</view> -->
			
					<view style="padding:0 10px;width: 50%;">
						<button class="rightTabsBtn" type="primary" @click="commit">提交</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				visiable:false,
				checked: false,
				checkboxVisible: true,
				keyword: '',
				taskId: '',
				dataList: [],
				factorList: [],
				checkedItem:[],
				sampleTaskInfo: {
					projectName: '',
					consignorName: '',
					inspectionName: '',
					sampleCount: '',
					jobId: '',
					inspectionLinker: '',
					singImageUrl: '',
					sampleVos: [],
				}
			}
		},
		onLoad(e) {
			if (e.taskId) {
				this.taskId = e.taskId
			}
			
				
			setTimeout(()=> {
							this.$nextTick(() => {
								
								this.$refs.collapse.init()
							})
						},1000)
			
		},
		onShow() {},
		mounted() {
			
			this.query()
		},
		methods: {
			commit(){
				
				let groups = []
				this.dataList.map((item)=>{
					let subCheckStandardIds = []
					let factorName = []
					item.subCheckStandardIds.map((injl)=>{
						if(injl.checked == true ){
							console.log(injl);
							subCheckStandardIds.push(injl.standardCode)
							factorName.push(injl.factorName)
							groups.push({
								secdClassId:injl.secdClassId,
								secdClassName:injl.secdClassName,
								checkStandardId:item.groupId,
								factorName:item.groupName, 
								isFactor:1,
								factorGroupKey:'',
								dataEntryStep:'1',
								dynamicParam:'',
								ids:item.groupId,
								standardCode:item.groupId,
								name:factorName,
								subCheckStandardIds:subCheckStandardIds
							})
						}
						
					})
				})
				
				
				let map = new Map();
				for (let item of groups) {
				    if (!map.has(item.ids)) {
				        map.set(item.ids, item);
				    };
				};
				let arr = [...map.values()];
				if(arr.length == 0){
					uni.showToast({
					title: '请选择因子套餐',
					icon:'none',
					duration: 2000
					});
					return
				}

				console.log(arr,651);	
				
				// console.log({...arr});
				uni.$emit('queryCombination' ,{ factor : arr});
				
				uni.$emit('edit_querys' ,{ params : arr});
				uni.navigateBack({
				                delta: 1
				              })
			},
			//复选框选中事件
			checkboxChange(e,item,val) {
				// this.checkedItem = []
				// console.log(e,item,val);
				// this.checkedItem.push(item)
			},
			//查询同系因子套餐下的因子
			searchFactor(item, index) {
					// this.$api.commonForGet('common/findCheckStandardsByGroupId/' + id,
					// resl => {
					// 	this.factorList = resl.result.map((item)=>{
					// 		this.$set(item,'checked',true)
					// 		item.checked = true
					// 	})
					// })
					item.subCheckStandardIds.map((item1)=>{
						item1.checked = true
					})
					this.$forceUpdate()
					this.$refs.collapse.init()
			},
			// 获取因子套餐
			query() {
				uni.showLoading({
				    	title:"加载中..."
					})
					
				let _this = this
				let params = {
					fuzzy:this.keyword
				}
				_this.$api.commonForGetParam('common/findHomFactorGroup',params, res => {
					if (res.code == 200) {
						let arr = res.result
										this.$nextTick(() => {
											if(res.result.length > 0){
												res.result.map((item)=>{
													_this.$api.commonForGet('common/findCheckStandardsByGroupId/' + item.groupId,
													resl => {
														resl.result.map((item1)=>{
															item1.checked = false
														})
														item.subCheckStandardIds = resl.result
														
													})
												})
												
											}
										})
						
						setTimeout(()=> {
										this.$nextTick(() => {
											_this.dataList = arr
											uni.hideLoading()
										})
									},2000)
						
						
					}

				})
			},
		}
	}
</script>

<style scoped>
	uni-page-body {
		height: 100%;
	}
	/deep/ .u-action-active {
		margin-left: 0;
		color: #3879d9;
	}
	.task-wrap {
		background: #F0F2FA;
		height: 100vh;
		display: flex;
		flex-direction: column;

	}


	.scroll-wrap {
		flex: 1;
		overflow: scroll;
		padding-bottom: 50rpx;
	}

	.tabContainer {
		height: auto;
	}

	.signature {
		position: absolute;
		top: 0;
		right: 0;
		width: 167rpx;
		height: 61rpx;
		color: #fff;
		background-color: #193566;
		border-radius: 19rpx 19rpx 19rpx 19rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 25rpx;
	}

	.footerBtn {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
	}

	.btn {
		border-radius: 0;
		width: 100%;
		background: #2f3a89;
	}

	.footerBtns {
		display: flex;
		background: #d2dcf8;
		padding: 10rpx 0;
		box-shadow: -1px 0 1px #ccc;
	}

	.dialogBtns {
		position: absolute;
		top: -180rpx;
		left: 0;
		padding: 10rpx 20rpx;
		background: #d2dcf8;
		width: 100%;
		box-shadow: 1px 0px 1px #ccc;
		padding-top: 20rpx;
	}

	.dialogBtn {
		border: 1px solid #eee;
		margin-bottom: 10rpx;
		width: 100%;
		padding: 0;
		font-size: 14px;
		height: 60rpx;
		color: #2f3a89;
		background: #ffda94;
	}

	.leftTabsBtn {
		width: 100%;
		border: 1px solid #fff;
		height: 60rpx;
		font-size: 14px;
		color: #2f3a89;
		background: #d3dcf9;
		box-shadow: 0px 0px 1px 1px #bbb;
	}

	.rightTabsBtn {
		height: 60rpx;
		font-size: 14px;
		background: #2f3a89;
	}

	.rightTabsSingleBtn {
		width: 50%;
		color: #2f3a89;
		height: 60rpx;
		font-size: 14px;
		box-shadow: 1px 1px 3px #ccc;
	}

	.center_between {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.top_head {
		background: #d3dcf9;
		padding: 10px;
	}

	.top_head_nav {
		display: flex;
		justify-content: space-between;
		align-items: center;

	}

	.content {
		flex: 1;
		text-align: right;
		color: #68696d;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.font_left {
		text-align: left;
	}

	.sample-term-wrap {
		width: calc(100%-70rpx);
		display: flex;
		justify-content: center;
		flex-direction: column;
		/* align-items: center; */
		padding-left: 35rpx;
		padding-right: 35rpx;
	}

	.sample-term {
		/* width: 90%; */
		/* min-height:390rpx; */
		/* height:370rpx; */
		border-radius: 16rpx;
		background: #fff;
		padding: 20rpx;
		box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.16);
		margin-top: 20rpx;
	}

	.FactorNav {
		border-radius: 16rpx;
		box-shadow: 0px 3px 3px 1px rgba(0, 0, 0, 0.16);
		margin-top: 20rpx;
		overflow: hidden;
	}

	.nav_btn {
		position: absolute;
		top: 10rpx;
		right: 0rpx;
	}

	.navSingleBtn {
		height: 50rpx;
		color: #fff;
		font-size: 12px;
		padding: 0 8px;
		background: #2f3a89;
		box-shadow: 1px 1px 3px #ccc;
	}

	.openFactorNav {
		color: #fff;
		padding: 8px 0;
		font-size: 12px;
		text-align: center;
		background: #193566;
	}

	/deep/.u-icon-wrap {
		display: none;
	}

	/deep/.u-collapse-head {
		padding-bottom: 0;
	}

	/deep/.u-collapse-body {
		/* height: auto!important; */
	}
</style>
